<template>
	<view>
		<view class="top-image">
			<image @click="toeditinfo" :src="imageurl" mode=""></image>
			<view class="user-info">
				<view class="nickname">
					{{username?username:'暂未设置用户名'}}
				</view>
				<view style="font-size: 40rpx;font-weight: 800;" class="signname">
					{{nickname?nickname:'暂无设置昵称'}}
				</view>
			</view>
		</view>
		<view v-if="isshow" class="login">
			<button class="register" type="default" @click="register">注册</button>
			<button class="Login" type="default" @click="login">登录</button>
		</view>
		<view class="order">
			<view class="title">
				我的订单
			</view>
			<view class="con">
				<view class="item">
					<image @click="tomyorder(0)" src="../../static/images/icons/icon-pay.png" mode=""></image>
					<view>待付款</view>
				</view>
				<view @click="tomyorder(1)" class="item">
					<image src="../../static/images/icons/pay-done.png" mode=""></image>
					<view>已付款</view>
				</view>
				<view @click="tomyorder(2)" class="item">
					<image src="../../static/images/icons/icon-car.png" mode=""></image>
					<view>已发货</view>
				</view>
				<view @click="tomyorder(3)" class="item">
					<image src="../../static/images/icons/icon-done.png" mode=""></image>
					<view>已收货</view>
				</view>
				<view @click="tomyorder(9)" class="item">
					<image src="../../static/images/icons/icon-back.png" mode=""></image>
					<view>售后</view>
				</view>
			</view>
		</view>

		<view class="tools">
			<view class="con">
				<view @click="tocollect" class="item">
					<image src="../../static/images/icons/save.png" mode=""></image>
					<view>收藏</view>
				</view>
				<view @click="nodevelop" class="item">
					<image src="../../static/images/icons/brand.png" mode=""></image>
					<view>品牌</view>
				</view>
				<view @click="nodevelop" class="item">
					<image src="../../static/images/icons/article.png" mode=""></image>
					<view>文章</view>
				</view>
				<view @click="toaddress" class="item">
					<image src="../../static/images/icons/address.png" mode=""></image>
					<view>地址</view>
				</view>
				<view @click="nodevelop" class="item">
					<image src="../../static/images/icons/card.png" mode=""></image>
					<view>卡包</view>
				</view>
				<view @click="tocar" class="item">
					<image src="../../static/images/icons/cart2.png" mode=""></image>
					<view>购物车</view>
				</view>
				<view @click="nodevelop" class="item">
					<image src="../../static/images/icons/kf.png" mode=""></image>
					<view>客服</view>
				</view>
				<view @click="nodevelop" class="item">
					<image src="../../static/images/icons/kf.png" mode=""></image>
					<view>测试</view>
				</view>
				<view @click="nodevelop" class="item">
					<image src="../../static/images/icons/wxpay.png" mode=""></image>
					<view>支付0.01元</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		getMemberInfo
	} from '../../api/my/login/login.js'
	import mix from "@/mixins/index.js"
	export default {
		data() {
			return {
				nickname: "",
				username: '',
				isshow: true,
				imageurl: '',
				id: ""
			}
		},
		mixins: [mix],
		methods: {
			// 到收藏页面
			tocollect() {
				uni.navigateTo({
					url: './collect/collect',
				});
			},
			// 到修改个人信息页面
			toeditinfo() {
				uni.navigateTo({
					url: `./editinfo/editinfo?id=${this.id}` ,
				});
			},
			// 登录
			login() {
				uni.navigateTo({
					url: './register/register',
				});
			},
			// 注册
			register() {
				uni.navigateTo({
					url: './login/login',
				});
			},
			// 点击未开发的功能
			nodevelop() {
				uni.showToast({
					title: '暂未开发此功能',
					icon: 'none'
				})
			},
			// 到购物车列表
			tocar() {
				uni.navigateTo({
					url: "./car/car"
				})
			},
			// 到收货地址页面
			toaddress() {
				uni.navigateTo({
					url: "./address/address"
				})
			},
			tomyorder(types) {
				console.log(types);
				uni.navigateTo({
					url: `./myorder/myorder?type=${types}`
				})
			}
		},
		onLoad() {
			getMemberInfo().then(res => {
				console.log(res);
				uni.setStorageSync('userinfo', res.data.userInfo)
				this.nickname = res.data.userInfo.nickname;
				this.username = res.data.userInfo.username;
				this.imageurl = res.data.userInfo.icon;
				this.id = res.data.userInfo.id;
			})
		},
		onShow() {
			if (uni.getStorageSync('token')) {
				this.isshow = false
				var obj = uni.getStorageSync('userinfo')
				this.nickname = obj.nickname;
				this.username = obj.username;
				this.imageurl = obj.icon;
			} else {
				this.isshow = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top-image {
		height: 150rpx;
		padding: 0 40rpx;
		display: flex;
		justify-content: space-between;
		margin-top: 60rpx;
		box-sizing: border-box;

		image {
			width: 150rpx;
			height: 150rpx;
			background-color: #999;
			border-radius: 50%;
			box-sizing: border-box;
		}

		.user-info {
			text-align: left;
			padding: 20rpx 0;
			width: 460rpx;
			display: flex;
			justify-content: space-between;
			flex-direction: column-reverse;
			color: #3d4c46;
			font-size: 28rpx;
			box-sizing: border-box;
		}
	}

	.login {
		padding: 0 100rpx;
		display: flex;
		justify-content: space-between;
		margin-top: 40rpx;
		box-sizing: border-box;

		button {
			width: 180rpx;
			height: 76rpx;
			line-height: 70rpx;
			font-size: 28rpx;
			box-sizing: border-box;
		}

		.register {
			background-color: rgba(0, 0, 0, 0);
			border: 2rpx solid #354e44;
			box-sizing: border-box;
		}

		.Login {
			color: #fff;
			background-color: #354e44;
			border: 2rpx solid #354e44;
			box-sizing: border-box;
		}
	}

	.order {
		width: 670rpx;
		padding: 0rpx 40rpx;
		background-color: #fff;
		margin: 40rpx auto;
		border-radius: 12rpx;
		box-sizing: border-box;

		.title {
			padding: 12rpx 0;
			border-bottom: 2rpx solid #eee;
			box-sizing: border-box;
		}

		.con {
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 30rpx 0;

			.item {
				width: 80rpx;
				box-sizing: border-box;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-left: 20rpx;
					box-sizing: border-box;
				}

				view {
					font-size: 26rpx;
					line-height: 36rpx;
					text-align: center;
					box-sizing: border-box;
				}
			}
		}
	}

	.tools {
		width: 670rpx;
		padding: 0rpx 40rpx;
		background-color: #fff;
		margin: 40rpx auto;
		border-radius: 12rpx;
		box-sizing: border-box;

		.con {
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;
			flex-wrap: wrap;
			padding: 30rpx 0;
			height: 100%;

			.item {
				width: 190rpx;
				padding: 40rpx 30rpx;
				height: 100%;
				box-sizing: border-box;

				image {
					width: 50rpx;
					height: 50rpx;
					margin-left: 40rpx;
					box-sizing: border-box;
				}

				view {
					font-size: 26rpx;
					line-height: 36rpx;
					text-align: center;
					margin-top: 20rpx;
					box-sizing: border-box;
				}
			}
		}
	}
</style>
